<template>
  <views class="facilitator_send_records">
    <viewTitle :title="'付款记录'" :border="true"></viewTitle>
    <div class="search_list">
      <el-form ref="form" :inline="true" label-width="auto">
        <div class="flex flexR">
          <div class="inputW flex flexR center">
            <el-form-item label="客户编号:">
              <el-input type="text" clearable placeholder="客户编号" v-model="client_sn"></el-input>
            </el-form-item>
          </div>
          <div class="inputW flex flexR center">
            <el-form-item label="客户名称:">
              <el-input type="text" clearable placeholder="客户名称" v-model="client_name"></el-input>
            </el-form-item>
          </div>
          <div class="inputW flex flexR center">
            <el-form-item label="批次号:">
              <el-input
                style="width:200px"
                type="text"
                clearable
                placeholder="批次号"
                v-model="enterprise_order_sn"
              ></el-input>
            </el-form-item>
          </div>
          <div class="inputW flex flexR center">
            <el-form-item label="订单号:" label-width="86px">
              <el-input type="text" clearable placeholder="订单号" v-model="enterprise_order_ext_sn" style="width:200px"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <el-form ref="form" label-width="auto" :inline="true">
        <div class="flex flexR">
          <div class="inputW flex flexR center">
            <el-form-item label="收款账号:">
              <el-input type="text" clearable placeholder="收款账号" v-model="rec_bank_code"></el-input>
            </el-form-item>
          </div>
          <div class="inputW flex flexR center">
            <el-form-item label="收款户名:">
              <el-input type="text" clearable placeholder="收款户名" v-model="rec_bank_account"></el-input>
            </el-form-item>
          </div>
          <div class="inputW flex flexR center">
            <el-form-item label="业务状态:">
              <el-select v-model="status" placeholder="状态" clearable style="width:200px">
                <el-option
                        v-for="item in status_select"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="inputW flex flexR center">
            <el-form-item label="所属服务商:" label-width="86px">
              <el-select v-model="facilitator_id" placeholder="所属服务商" filterable clearable style="width:200px">
                <el-option
                        v-for="item in facilitator_select_list"
                        :key="item.facilitator_id"
                        :label="item.facilitator_name"
                        :value="item.facilitator_id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <el-form ref="form" label-width="auto" :inline="true">
        <div class="flex flexR">

          <div class="flex flexR center">
            <el-form-item label="提交时间:">
              <el-date-picker
                v-model="created_time"
                value-format="timestamp"
                :default-time="['0:00:00','23:59:59']"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                align="right"
              ></el-date-picker>
            </el-form-item>
          </div>

          <el-form-item>
            <div class="search_unit">
              <el-button @click="reset()" icon="el-icon-refresh">重置</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="search_unit">
              <el-button type="primary" @click="query()" icon="el-icon-search">查询</el-button>
            </div>
          </el-form-item>
		  <el-form-item>
            <div class="search_unit">
              <el-button type="danger" icon="el-icon-download" @click="exportExcel">导出列表</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="search_input flex flexR center">
      <div :style="{marginLeft:'15px'}" class="show-title-money flex flexR">
        <div class="flex flexR">
          <div>交易笔数</div>
          <div class="price">{{pagination.total_count}}</div>
          <div>笔</div>
        </div>
        <div class="flex flexR">
          <div>交易金额(元)</div>
          <div class="price">￥{{pagination.summy ? $splitK(pagination.summy) : ''}}</div>
        </div>
      </div>
    </div>

    <div class="table_data">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" fixed="left" label="序号" width="100"></el-table-column>
        <el-table-column prop="enterprise_order_sn" label="批次号" width="200"></el-table-column>
        <el-table-column prop="enterprise_order_ext_sn" label="订单号" width="200"></el-table-column>
        <el-table-column prop="client_sn" label="客户编号" width="150"></el-table-column>
        <el-table-column prop="client_name" label="客户名称" width="100"></el-table-column>
        <el-table-column prop="facilitator_name" label="所属服务商" width="180"></el-table-column>
        <el-table-column prop="create_time" label="提交时间" width="200"></el-table-column>
        <el-table-column prop="real_money" label="交易金额" width="120"></el-table-column>
        <el-table-column prop="rec_bank_account" label="收款户名" width="120"></el-table-column>
        <el-table-column prop="ext_status" label="业务状态" width="120"></el-table-column>
        <el-table-column prop="rec_bank_code" label="收款账号" width="180"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150" v-if="isLook">
          <template slot-scope="scope">
            <el-button type="primary" @click="look(scope.row.enterprise_order_ext_id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging flex flexR">
        <el-pagination
          style="background:#fff; padding:10px 0"
          background
          layout="total, sizes,prev, pager, next, jumper"
          @size-change="handleSizeChange($event)"
          @current-change="changePage($event)"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.page_size"
          :total="pagination.total_count"
          :current-page="pagination.current_page"
          :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>
  </views>
</template>





<script>
export default {
  name: "FacilitatorSendRecords",
  data() {
    return {
      status_select: [
        //列表中，企业可选择状态
        {
          label: "待审核",
          value: 0
        },
        {
          label: "企业内部审核通过",
          value: 1
        },
        {
          label: "服务商审核通过",
          value: 2
        },
        {
          label: "已全部打款",
          value: 4
        },
        {
          label: "审核不通过",
          value: 5
        }
      ],
      pickerOptions: {
        //企业创建时间快捷方式选择插件
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      facilitator_select_list: [], //平台可选服务商列表
      facilitator_id: "", //选择的服务商ID
      status: "", //列表中选中的代理商状态
      created_time: [], //企业创建时间范围
      client_sn: "", //客户编号
      client_name: "", //客户名称
      enterprise_order_sn: "", //批次号
      enterprise_order_ext_sn: "", //订单号
      rec_bank_code: "", //收款账号
      rec_bank_account: "", //收款户名
      tableData: [], //表格数据
      pagination: {
        //分页数据
        page_start: 0, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      }
    };
  },
  mounted() {
    //获取平台可选服务商简易列表
    this.getSimpleFacilitatorList();

    //获取列表数据
    this.query();
  },
  computed: {
    //实时计算要传输的编辑参数
    post_data() {
      let data = {};
      if (this.created_time && this.created_time.length > 0) {
        // data.created_time_start = this.created_time[0] / 1000; //去掉后面的毫秒级
        // data.created_time_end = this.created_time[1] / 1000; //去掉后面的毫秒级
        data.created_time_start = this.created_time[0]/1000;
        data.created_time_end = this.created_time[1]/1000;
      }
      data.client_sn = this.client_sn;
      data.client_name = this.client_name;
      data.enterprise_order_sn = this.enterprise_order_sn;
      data.enterprise_order_ext_sn = this.enterprise_order_ext_sn;
      data.rec_bank_code = this.rec_bank_code;
      data.rec_bank_account = this.rec_bank_account;
      data.status = this.status;
      data.facilitator_id = this.facilitator_id;
      data.pagination = this.pagination;
      console.log("data", data);
      return data;
    },
    isLook() {
      //判断是否具有 “查看” 按钮权限
      return this.$store.state.buttonPermission[this.$route.path] &&
        this.$store.state.buttonPermission[this.$route.path].look
        ? 1
        : 0;
    }
  },
  methods: {
    getSimpleFacilitatorList() {
      this.$raxios
        .post(this.$mapapi.getSimpleFacilitator, {})
        .then(res => {
          if (res.code != 200 && res.code != 501)
            return Promise.reject(res.msg);
          this.facilitator_select_list = res.data;
        })
        .catch(res => {
          this.$message.error(res);
        });
    },
    handleSizeChange(page_size) {
      //变动每页数量时
      this.pagination.page_size = page_size;
      this.query();
    },
    changePage(current_page) {
      //切换页码时
      this.pagination.page_start = current_page;
      this.query();
    },
    reset() {
        this.client_sn = "";
        this.client_name = "";
        this.enterprise_order_sn = "";
        this.enterprise_order_ext_sn = "";
        this.rec_bank_code = "";
        this.rec_bank_account = "";
        this.status = "";
        this.facilitator_id = "";
        this.created_time = [];
        this.query();
    },
    exportExcel(){
        let a = document.createElement('a')
        a.href = this.download_url;
        a.click()
    },
    query() {
      //获取列表数据
      this.$raxios
        .post(this.$mapapi.orderListDischarge, { data: this.post_data })
        .then(res => {
          if (res.code != 200 && res.code != 501)
            return Promise.reject(res.msg);
          this.tableData = res.data.list;
          this.pagination = res.data.pagination;
          this.download_url = res.data.download_url;
        })
        .catch(res => {
          this.$message.error(res);
        });
    },
    look(enterprise_order_ext_id) {
      this.$toRoutePath({
        path: "/facilitator_send_records/facilitator_send_records_detail",
        edit: true,
        query: { enterprise_order_ext_id }
      });
    }
  }
};
</script>


<style  lang="less" :scope="true" src="@/style/facilitator/facilitator_send_records.less">
</style>
